<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由02</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <router-view></router-view>
    </div>

    <!-- 等待支付 -->
    <template id="wait">
        <div>
            <h3>等待支付</h3>
            <p>大盘鸡</p>
            <p>烤肉饭</p>
            <button @click="toPay()">去支付</button>
        </div>
    </template>
    <script>
        var waitPay = Vue.component('wait-pay', {
            template: '#wait',
            methods: {
                toPay() {
                    console.log('toPay..');
                    this.$router.push({
                        name: '支付方式'
                    })
                }
            }
        });
    </script>

    <!-- 支付方式 -->
    <template id="select-pay">
        <div>
            <h3>选择支付方式</h3>
            <p>支付宝</p>
            <p>微信</p>
            <p>银行卡</p>
            <button @click="pay()">确认支付</button>
        </div>
    </template>
    <script>
        var selectPay = Vue.component('select-pay', {
            template: '#select-pay',
            methods: {
                pay() {
                    console.log('pay...');
                    // replace用法同push，不会留下记录
                    this.$router.replace({
                        name: '支付成功'
                    });
                }
            }
        });
    </script>
    <!-- 支付成功 -->
    <template id="success">
        <div>
            <h3>支付成功</h3>
        </div>
    </template>
    <script>
        var success = Vue.component('success', {
            template: '#success'
        });
    </script>

    <!-- 标题的主页面 -->
    <template id="self-main">
        <div>
            <h3>路由传参</h3>
            <!-- 补全子路由路径 -->
            <router-link to="/main/list">user list</router-link>
            <button @click="toUserList()">user-list</button>
            <router-view></router-view>
            <!-- <router-view></router-view> 可以存在多个 -->
        </div>
    </template>
    <script>
        var selfMain = Vue.component('self-main', {
            template: '#self-main',
            methods: {
                toUserList() {
                    this.$router.push({
                        name: '用户列表'
                    });
                }
            }
        });
    </script>
    <!-- 列表 -->
    <template id="user-list">
        <div>
            <ul>
                <li>
                    <router-link to="/main/list/list1">第1条项目</router-link>
                </li>
                <li>
                    <router-link to="/main/list/list2">第2条项目</router-link>
                </li>
            </ul>
        </div>
    </template>
    <script>
        var userList = Vue.component('user-list', {
            template: '#user-list'
        });
    </script>

    <!-- 用户1 -->
    <template id="user-list1">
        <div>
            <div>
                <p>User的详细页面</p>
                <p>传过来的用户编号<strong>1</strong></p>
            </div>
        </div>
    </template>
    <script>
        var userList1 = Vue.component('user-list1', {
            template: '#user-list1'
        });
    </script>
    <!-- 用户2 -->
    <template id="user-list2">
        <div>
            <div>
                <p>User的详细页面</p>
                <p>传过来的用户编号<strong>2</strong></p>
            </div>
        </div>
    </template>
    <script>
        var userList2 = Vue.component('user-list2', {
            template: '#user-list2'
        });
    </script>


    <script>
        var router = new VueRouter({
            routes: [
                {
                    path: '/',
                    redirect() {
                        // 路由重定向，必须有返回值，可以做逻辑判断
                        // return '/wait';
                        return '/main';
                    }
                },
                {
                    path: '/main',
                    component: selfMain,
                    // 子路由，和routes一样，不加路径的/
                    children: [
                        {
                            path: 'list', // /main/list
                            name: '用户列表',
                            component: userList
                        },

                        {
                            path: 'list/list1', // /main/list/list1
                            name: '第一条项目',
                            component: userList1
                        },
                        {
                            path: 'list/list2', // /main/list/list2
                            name: '第二条项目',
                            component: userList2
                        }
                    ]
                },
                {
                    path: '/wait',
                    name: '等待支付',
                    component: waitPay
                },
                {
                    path: '/select',
                    name: '支付方式',
                    component: selectPay
                },
                {
                    path: '/success',
                    name: '支付成功',
                    component: success
                },
            ]
        });
        var vue = new Vue({
            el: '#app',
            router
        });
        /*
            编程式路由：使用js的方式跳转路由页
            this.$router.push()
            this.$router.replace()：用法和push一样，不会留下浏览记录
            在哪个页面使用，哪个页面就不会留下记录

            二级路由：设置children属性，属性值和routes一样，也是路由的数组
            二级以后的路由路径不加'/'
            在子路由显示时，当前路径中所有的页面内容都会显示，包含父级路由
            常用于控制菜单和菜单下面的子页面
        */
    </script>
</body>

</html>